import React from 'react'
import { View, Image } from 'react-native'
import { Content, CardItem, Thumbnail, Text, Button, Icon, Left, Body, Right } from 'native-base';
import _ from 'lodash'
import moment from 'moment'
import { Toast } from 'antd-mobile'
import { THEME_BACKGROUND } from '../../static/color'

const NewTime = (props) => {
  const { dataSource, currentUser, dispatch } = props
  const {
    user,
    area,
    attraction,
    collection,
    love,
    file,
    createdAt
  } = dataSource
  const hasLoveUser = _.findIndex(love, loves => loves === currentUser.objectId)
  const hasCollect = _.findIndex(collection, collect => collect === currentUser.objectId)
  Love = () => {
    if (!_.isObject(currentUser)) {
      return Toast.fail('您尚未登录！！！')
    } else if (hasLoveUser === -1) {
      dispatch({
        type: 'app/loveShare',
        payload: {
          travelsId: dataSource.objectId,
          userID: currentUser.objectId,
          type: 'ADD'
        }
      })
    } else {
      dispatch({
        type: 'app/loveShare',
        payload: {
          travelsId: dataSource.objectId,
          userID: currentUser.objectId,
          type: 'DELETE'
        }
      })
    }
    return null
  }
  Collect = () => {
    if (!_.isObject(currentUser)) {
      return Toast.fail('您尚未登录！！！', 1)
    } else if (hasCollect === -1) {
      dispatch({
        type: 'app/collectShare',
        payload: {
          travelsId: dataSource.objectId,
          userID: currentUser.objectId,
          type: 'ADD'
        }
      })
    } else {
      dispatch({
        type: 'app/collectShare',
        payload: {
          travelsId: dataSource.objectId,
          userID: currentUser.objectId,
          type: 'DELETE'
        }
      })
    }
    return null
  }
  const currentCollectColor = _.isObject(currentUser) ? (hasCollect === -1 ? THEME_BACKGROUND : 'red') : THEME_BACKGROUND//eslint-disable-line
  const currentLoveColor = _.isObject(currentUser) ? (hasLoveUser === -1 ? THEME_BACKGROUND : 'red') : THEME_BACKGROUND//eslint-disable-line
  return (
    <View style={{
      margin: 10,
      borderRadius: 10,
      borderStyle: 'solid',
      elevation: 10
     }}
    >
      <CardItem>
        <Left>
          <Thumbnail source={{ uri: '' }} />
          <Body>
            <Text>{_.isNil(user) ? '' : user.username}</Text>
            <Text note>{_.isNil(attraction) ? '' : attraction}</Text>
          </Body>
        </Left>
      </CardItem>
      <CardItem cardBody>
        <Image
          source={{ uri: 'http://img06.tooopen.com/images/20160921/tooopen_sy_179583447187.jpg' }}
          style={{ height: 150, width: null, flex: 1 }}
        />
      </CardItem>
      <CardItem>
        <Left>
          <Button transparent onPress={this.Love}>
            <Icon
              name="thumbs-up"
              type="FontAwesome"
              style={{ fontSize: 20, color: currentLoveColor }}
            />
            <Text>{love.length} Likes</Text>
          </Button>
        </Left>
        <Body>
          <Button transparent onPress={this.Collect}>
            <Icon active={false} name="chatbubbles" style={{ fontSize: 20, color: currentCollectColor }} />
            <Text>{collection.length} Collect</Text>
          </Button>
        </Body>
        <Right>
          <Text>{moment(createdAt).format('YYYY/MM/DD')}</Text>
        </Right>
      </CardItem>
    </View>
  )
}

export default NewTime
